<template>
  <!--库存查询 -->
  <div class="e-form">
    <div class="tabs">
      <el-tabs tab-position="left" v-model="tabsName" @tab-click="onChangeTab">
        <!-- 基本信息 -->
        <el-tab-pane
          label="物资库存"
          name="baseInfo"
          :disabled="clickTabFlag"
        ></el-tab-pane>
        <el-tab-pane
          label="机械发料库存"
          name="receivingMaterials"
          :disabled="clickTabFlag"
        ></el-tab-pane>

        <div>
          <!-- 库存 -->
          <div class="e-table">
               <div class="top">
                <div class="left"  style="margin-left: 10px;">
                    <div>
                    <el-button  type="primary" style="background: #2e61d7;">导出</el-button>

                    </div>
                </div>
                <div class="right">
        <div>
          <el-input
            placeholder="输入项目编号或机构"
            size="small"
            v-model="pagination.keyword"
            @blur="search"
          >
            <i
              slot="suffix"
              class="el-input__icon el-icon-search"
              @click="search"
            ></i>
          </el-input>
        </div>
        <div style="margin-left: 5px">
          <el-button
            size="small"
            style="background: #2e61d7; color: #fff"
            @click="heightSharch"
            >高级搜索
          </el-button>
        </div>
      </div>
                </div>

          <div id="baseInfoCon" class="con">
               <div class="tabs-title" id="baseInfo">物资库存</div>
             <div class="e-table">
              <div class="tops" style="margin-bottom: 10px;">
                  <span>总库存量:</span> <span style="margin-left: 400px;">总消耗盘点量:</span>
              </div>
              <el-table
                :data="materialDataList"
                border
                style="width: 100%"
                @cell-mouse-enter="cellMouseEnter"
                @cell-mouse-leave="cellMouseLeave"
                :cell-class-name="cellClsNm"
                :header-cell-style="{ textAlign: 'center' }"
                :cell-style="{ textAlign: 'center' }"
                :tree-props="{
                  children: 'children',
                  hasChildren: 'hasChildren',
                }"
                row-key="uuid"
                :max-height="$store.state.tableHeight"
                ref="table"
                v-sortTable="{ 'tableData': materialDataList, '_this': this, 'ref': 'table' }"
              >
                <el-table-column
                  fixed
                  type="index"
                  label="序号"
                  width="50"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="materialClassName"
                  label="物资类别"
                  min-width="150"
                >
                </el-table-column>
                <el-table-column
                  prop="materialName"
                  label="物资名称"
                  width="150"
                >
                </el-table-column>
                <el-table-column prop="spec" label="规格" width="100">
                </el-table-column>
                <el-table-column prop="unit" label="单位" width="100">
                </el-table-column>
                <el-table-column prop="texture" label="材质" width="100">
                </el-table-column>
                <el-table-column prop="warehouseName" label="仓库" width="100">
                </el-table-column>
                <el-table-column
                  prop="quantity"
                  label="当前库存数量"
                  width="150"
                >
                </el-table-column>
                 <el-table-column
                  prop="lockedQuantity"
                  label="锁定数量"
                  width="150"
                >
                </el-table-column>
                <el-table-column prop="notConsumedQuantity" label="盘点未消耗数量" width="150">
                </el-table-column>
                <el-table-column
                  prop="orgName"
                  label="机构/单位名称"
                  min-width="250"
                >
                </el-table-column>
              </el-table>
             <ComPagination
                style="margin-top:10px"
                :total="pagination.total"
                :pageSize.sync="pagination.pageSize"
                :currentPage.sync="pagination.currentPage"
                @currentChange="GetmaterialDataList"
                @sizeChange="GetmaterialDataList"
                />
            </div>
            <!-- ------------------------------------------------------------------------------------- -->
          </div>
          <!-- 机械发料库存 -->
          <div id="receivingMaterialsCon" class="con">
            <div class="tabs-title" id="receivingMaterials">机械发料库存</div>
            <div class="e-table">
              <el-table
                :data="mechanicalStoreData"
                border
                style="width: 100%"
                @cell-mouse-enter="cellMouseEnter"
                @cell-mouse-leave="cellMouseLeave"
                :cell-class-name="cellClsNm"
                :header-cell-style="{ textAlign: 'center' }"
                :cell-style="{ textAlign: 'center' }"
                :tree-props="{
                  children: 'children',
                  hasChildren: 'hasChildren',
                }"
                row-key="uuid"
                :max-height="$store.state.tableHeight"
                 ref="table"
                v-sortTable="{ 'tableData': mechanicalStoreData, '_this': this, 'ref': 'table' }"
              >
                <el-table-column
                  fixed
                  type="index"
                  label="序号"
                  width="80"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="materialClassName"
                  label="物资类别"
                  min-width="150"
                >
                </el-table-column>
                <el-table-column
                  prop="materialName"
                  label="物资名称"
                  width="150"
                >
                </el-table-column>
                <el-table-column prop="spec" label="规格" width="100">
                </el-table-column>
                <el-table-column prop="texture" label="材质" width="100">
                </el-table-column>
                <el-table-column prop="unit" label="单位" width="100">
                </el-table-column>
                <el-table-column prop="quantity" label="当前数量" width="150">
                </el-table-column>
                <el-table-column
                  prop="equipNo"
                  label="设备编号"
                  min-width="150"
                >
                </el-table-column>
                <el-table-column prop="equipName" label="设备名称" width="150">
                </el-table-column>
              </el-table>
              <ComPagination
                style="margin-top:10px"
                :total="paginations.total"
                :pageSize.sync="paginations.pageSize"
                :currentPage.sync="paginations.currentPage"
                @currentChange="GetmechanicalStoreData && GetmaterialDataList"
                @sizeChange="GetmechanicalStoreData && GetmaterialDataList"
                />
            </div>
          </div>
             </div>
        </div>
      </el-tabs>
    </div>
    <div id="seat" :style="{ height: seatHeight + 'px' }"></div>
  </div>
</template>

<script>
import ComPagination from '@/components/pagination/pagination.vue'
import '@/utils/jquery.scrollTo.min'
// import CommonApi from '@/api/materials/common.js'
import { vueDom, debounce, advanceSearch } from '@/utils/common.js'
import Api from '@/api/materials/inventoryinquire.js'
import { mapMutations } from 'vuex'
export default {
    data () {
        return {
            tabsName: 'baseInfo',
            userName: '',
            materialDataList: [], //物资库存
            mechanicalStoreData: [], //机械发料
            value: '',
            textarea: '',
            screenWidth: 0,
            screenHeight: 0,
            lastConHeight: 0,
            clickTabFlag: false, // 如果手动点击时，则不做滚动事件逻辑，只有滚动屏幕时才走滚动事件逻辑
            searchIpt: '',
            pagination: {
                total: 0,
                pageSize: 20,
                currentPage: 1,
                'equipName': '',
                'keyword': '',
                'limit': 20,
                'orgId': '',
                'page': 1,
                'states': [],
                'stockType': [],
                'subcontractorId': '',
                'warehouseId': '',
                'warehouseName': '',
                'warehouseType': []
            },
            paginations: {
                total: 0,
                pageSize: 10,
                currentPage: 1
            },

        }
    },
    computed: {
        judgeRoute () {
            if (this.$route.path.includes('Add')) {
                return false
            }
            return true
        },
        // 填补底部空白，以使高度够滚动
        seatHeight () {
            return this.screenHeight - 72 - this.lastConHeight
        },
    },
    components: {
        ComPagination,
    },
    created () {
        this.GetmaterialDataList()
        this.GetmechanicalStoreData()
    },
    mounted () {
        // table动态高度
        vueDom(
            () => {
                this.tableHeight = document.body.clientHeight - 170
            },
            () => {
                return $('table').length !== 0
            }
        )
        this.fn = () => {
            this.tableHeight = document.body.clientHeight - 170
        }
        window.onresize = debounce(this.fn)

        // 保存所有tabName
        const arr = ['baseInfo', 'receivingMaterials', 'accessory']
        let $idsTop = []
        window.addEventListener('scroll', () => {
            // 如果手动点击时，则不做滚动事件逻辑，只有滚动屏幕时才走滚动事件逻辑
            if (this.clickTabFlag) {
                return
            }

            if (!$idsTop[$idsTop.length - 1]) {
                $idsTop = arr.map(item => {
                    const $item = document.getElementById(item)
                    let itemTop = null
                    if ($item) {
                        itemTop = $item.offsetTop
                    }
                    return itemTop
                })
            }
            const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop
            // 倒序查找
            let curLocal = 0
            for (let len = $idsTop.length, i = len - 1; i >= 0; i--) {
                let item = $idsTop[i]
                if (scrollTop + 1 >= item) {
                    curLocal = i
                    break
                }
            }
            // 设置对应tabName
            this.tabsName = arr[curLocal]
        })

        this.screenWidth = document.documentElement.clientWidth - this.topHeight
        this.screenHeight = document.documentElement.clientHeight - this.topHeight
        window.addEventListener('resize', () => {
            this.screenWidth = document.documentElement.clientWidth - this.topHeight
            this.screenHeight = document.documentElement.clientHeight - this.topHeight
            $idsTop = arr.map(item => {
                const itemTop = document.getElementById(item).offsetTop
                return itemTop
            })
        })
        if (this.$route.query.name) {
            setTimeout(() => {
                this.onChangeTab({
                    name: this.$route.query.name,
                })
                this.tabsName = this.$route.query.name
            }, 200)
        }
    },
    methods: {
        ...mapMutations(['setSearchData']),
        //模糊搜索
        search () {
            this.GetmaterialDataList()
            this.GetmechanicalStoreData()
        },
        //清空高级搜索的数据
        clearData () {
            this.pagination = {
                'equipName': '',
                'keyword': '',
                'limit': 20,
                'orgId': '',
                'page': 1,
                'states': [],
                'stockType': [],
                'subcontractorId': '',
                'warehouseId': '',
                'warehouseName': '',
                'warehouseType': []
            }
            this.setSearchData({ equipSearchData: this.pagination })
        },
        // 高级搜索
        heightSharch () {
            advanceSearch('/inventoryinquireHeightSearch').then(res => {
                this.pagination = res.equipSearchData
                this.res = this.pagination
                this.GetmaterialDataList()
                this.GetmechanicalStoreData()
            })
        },
        //获取物资库存
        GetmaterialDataList () {
            if (this.pagination.currentPage) {
                this.pagination.page = this.pagination.currentPage
            }
            if (this.pagination.pageSize) {
                this.pagination.limit = this.pagination.pageSize
            }
            Api.materialDataList(this.pagination)
                .then(res => {
                    this.materialDataList = res.list
                    this.pagination.total = res.totalCount
                })
        },
        //获取机械发料库存
        GetmechanicalStoreData () {
            if (this.pagination.currentPage) {
                this.pagination.page = this.pagination.currentPage
            }
            if (this.pagination.pageSize) {
                this.pagination.limit = this.pagination.pageSize
            }
            Api.mechanicalStoreData(this.pagination)
                .then(res => {
                    this.mechanicalStoreData = res.list
                    this.paginations.total = res.totalCount
                })
        },
        cellClsNm ({ column }) {
            if (column.label === '') {
                return 'fixed-left'
            }
        },
        cellMouseEnter (row) {
            this.MouseEnterId = row.billId
        },
        cellMouseLeave () {
            this.MouseEnterId = 0
        },

        onChangeTab (e) {
            const height  = $('#' + e.name).offset().top
            $.scrollTo(height - this.topHeight, 500)
            // 如果手动点击时，则不做滚动事件逻辑，只有滚动屏幕时才走滚动事件逻辑
            this.clickTabFlag = true
            // 动画结束后，恢复状态
            setTimeout(() => {
                this.clickTabFlag = false
            }, 600)
        },
    },
}
</script>

<style lang="scss" scoped>
.buttons {
  left: 0;
}
.e-form {
  margin-bottom: 80px;
  padding: 0 20px;
  .tabs-title::before {
    content: "";
    height: 22px;
    width: 8px;
    border-radius: 40px;
    background-color: #2e61d7;
    display: block;
    position: absolute;
    left: 20px;
    margin-right: 20px;

  }
}

.e-table {
  background: #fff;
}
// ::v-deep.el-table__body-wrapper::-webkit-scrollbar{
//      width: 6px !important; // 横向滚动条
//     height: 10px !important// 纵向滚动条
// }

::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px; // 横向滚动条
  height: 10px; // 纵向滚动条
}
// 滚动条的滑块
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 5px;
}

.el-tab-pane {
  margin-left: -10px;
}
</style>